<template>
  <div>
    <el-dialog
      title="审批"
      :visible.sync="dialogVisible3"
      width="60%"
      center
      @closed="childmethod2"
    >
      <el-table
        :data="approvetable"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="hash.certnum"
          label="证书编号"
        >
        </el-table-column>
        <el-table-column label="修正因子">
          <template slot-scope="scope">
            <div v-html="scope.row.hash.factor">{{scope.row.hash.factor}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.upload_time"
          label="提交时间"
        >
        </el-table-column>
        <el-table-column
          prop="hash.verifiy_project"
          label="检测项目"
        >
        </el-table-column>
        <el-table-column
          label="量值"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.hash.measurement">{{scope.row.hash.measurement}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.status=='-1'" style="color:red">被驳回</span>
            <span v-if="scope.row.hash.status=='0'">确认人未提交</span>
            <span v-if="scope.row.hash.status=='1'">确认人已提交</span>
            <span v-if="scope.row.hash.status=='2'">审核人批准</span>
            <span v-if="scope.row.hash.status=='3'">批准人批准</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.confirm_personname"
          label="确认人"
        >
        </el-table-column>
        <el-table-column label="查看附件">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="checkfj2(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">

            <el-button size="mini" type="primary" @click="showshdata(scope.row)">确认记录</el-button>
            <el-button size="mini" type="primary" @click="passsp(scope.row)" v-if="scope.row.hash.status=='2'">通 过</el-button>
            <el-button size="mini" type="danger" @click="refusesp(scope.row)" v-if="scope.row.hash.status=='2'">驳 回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title=""
        :visible.sync="innerVisible33"
        appendToBody
        width="95%"
        top="0"
        center
      >
        <el-row :gutter="40">
          <el-col :span="12">
            <div id="printrecord">
              <div>
                <div style="height:50px">

                </div>
                <div style="height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333">
                  检定/校准结果确认记录
                </div>
                <div class="tablediv">
                  <span style="border-bottom:0">仪器名称</span>
                  <span style="border-left:0;border-right:0;border-bottom:0;font-size:13px">{{shrecordData.ep_ename}}</span>
                  <span style="border-bottom:0">仪器型号</span>
                  <span style="border-left:0;border-bottom:0">{{shrecordData.scale}}</span>
                </div>
                <div class="tablediv">
                  <span style="border-bottom:0">仪器编号</span>
                  <span style="border-left:0;border-right:0;border-bottom:0">{{shrecordData.managenum}}</span>
                  <span style="border-bottom:0">使用部门</span>
                  <span style="border-left:0;border-bottom:0">{{shrecordData.confirm_org}}</span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;border-bottom:0">校定/校准单位</span>
                  <span style="width:75%;border-left:0;border-bottom:0">{{shrecordData.verifiy_company}}</span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;border-bottom:0">校定/校准证书编号</span>
                  <span style="width:75%;border-left:0;border-bottom:0">{{shrecordData.certnum}}</span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;height:auto;border-bottom:0">确认依据</span>
                  <span class="span" style="width:75%;line-height:25px;text-align:left;white-space:pre;height:auto;border-left:0;border-bottom:0;" v-if="shrecordData.confirm_basis">
                    <b>{{shrecordData.confirm_basis.replace(/##/g,"\n")}}</b>
                  </span>
                  <span style="width:75%;line-height:50px;white-space:pre;height:auto;border-left:0;border-bottom:0;" v-else>
                    <b>暂无依据</b>
                  </span>
                </div>

                <div class="tablediv">
                  <span style="width:100%;height:100%;padding:20px;min-height:45vh;border-bottom:0;">
                    <p style="height:40px;line-height:40px;text-align:left">确认情况：</p>
                    <div v-html="shrecordData.confirm_content">
                      {{shrecordData.confirm_content}}
                    </div>

                  </span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;line-height:50px;;border-right:0">结论</span>
                  <span style="width:75%;line-height:50px">{{shrecordData.confirm_conclusion}}</span>
                </div>
              </div>
              <div style="display:flex;justify-content:space-around;line-height:40px;margin-top:20px">
                <span>确认：<img :src="shrecordData.confirm_person_signature" height="40" v-if="shrecordData.confirm_person_signature!=''"></span>
                <span>审核：<img :src="shrecordData.check_person_signature" height="40" v-if="shrecordData.check_person_signature!=''"></span>
                <span>批准：<img :src="shrecordData.approval_person_signature" height="40" v-if="shrecordData.approval_person_signature!=''"></span>
                <span>批准日期：{{shrecordData.confirm_time}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <p style="line-height:50px;font-size:20px;">附件列表</p>
            <div class="demo-image__preview" v-for="fit in fileArr2" :key="fit">
              <div v-if="fit.hash.fileurl.split('.').pop()=='jpg'||fit.hash.fileurl.split('.').pop()=='png'">
                <el-image
                  style="width: 100%"
                  :src="fit.hash.fileurl"
                ></el-image>
              </div>
              <div v-else-if="fit.hash.fileurl.split('.').pop()=='pdf'" style="margin:30px 0;min-height:100vh">
                <a href="#">{{fit.hash.filename}}</a>
                <viewpdf :pdfUrl="fit.hash.fileurl" style="min-height:1300px"></viewpdf>
              </div>
              <div v-else style="margin:30px 0">
                <a :href="fit.hash.fileurl" download="">{{fit.hash.filename}} 下载</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog
        title="查看附件"
        :visible.sync="innerVisible44"
        appendToBody
      >
        <el-table
          :data="fileArr2"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="hash.filename"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a :href="scope.row.hash.fileurl" target="_blank" download="">下 载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog
        title="审批"
        :visible.sync="innerVisible55"
        appendToBody
        width="40%"
      >
        <el-form labelWidth="150px">
          <el-form-item label="审批状态" class="is-required" style="width:100%">
            <el-radio v-model="spstatus" label="1">通过</el-radio>
            <el-radio v-model="spstatus" label="0">驳回</el-radio>
          </el-form-item>
          <el-form-item label="驳回原因" class="is-required" style="width:100%" v-if="spstatus==0">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="innerVisible55 = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitcheck">提 交</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="审批驳回"
        :visible.sync="innerVisible55"
        appendToBody
        width="40%"
      >
        <el-form labelWidth="150px">
          <el-form-item label="驳回原因" class="is-required" style="width:100%">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="reject_reason"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="innerVisible55 = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="dorefusesp">提 交</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer" v-if="approvetable.length>0">
        <el-button size="mini" @click="dialogVisible3 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitcheck">审 批</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import viewpdf from '~/components/common/viewpdf.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      dialogVisible3: true,
      innerVisible33: false,
      innerVisible44: false,
      innerVisible55: false,
      shrecordData: {
        confirm_person_signature: '',
        check_person_signature: '',
        approval_person_signature: '',
      },
      fileArr2: [],
      spstatus: '1',
      reject_reason: '',
      refuseid: '',

    };
  },
  props: {
    childmethod2: Function,
    approvetable: {
      type: Array,
      required: true,
    },
  },
  components: {
    viewpdf,
  },
  methods: {
    passsp(item) {
      this.$confirm('是否提交审批通过?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const req = {
          handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A8840DAE4ED8972737355ECD7322ABDA410977E8BFF82C603',
          id: item.hash.id,
        };
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功',
          });
          this.$parent.showdia(4, this.approvetable[0].hash.vid);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    refusesp(item) {
      this.refuseid = item.hash.id;
      this.reject_reason = '';
      this.innerVisible55 = true;
    },
    dorefusesp() {
      if (this.reject_reason == '') {
        this.$message({
          type: 'info',
          message: '请填写驳回原因',
        });
        return;
      }
      this.$confirm('是否提交审批驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const req = {
          handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A8840DAE4ED8972736C7F86B9939CB7EC',
          id: this.refuseid,
          reject_reason: this.reject_reason,
        };
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功',
          });
          this.$parent.showdia(4, this.approvetable[0].hash.vid);
          this.innerVisible55 = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    checkfj2(item) {
      console.log(item);
      const req = {
        handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C51F0C438E24ECDA3C',
        id: item.hash.cid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fileArr2 = ts.d.data.operation1;
        this.innerVisible44 = true;
      });
    },
    showshdata(item) {
      const req2 = {
        handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C51F0C438E24ECDA3C',
        id: item.hash.cid,
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts2) => {
        this.fileArr2 = ts2.d.data.operation1;
      });
      const req = {
        handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C5526704B7BEE1B46A',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.shrecordData = ts.d.data.operation1[0].hash;
      });
      this.innerVisible33 = true;
    },
    submitcheck() {
      this.$confirm('是否提交审批?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const req = {
          handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A8840DAE4ED8972737355ECD7322ABDA40EED0661F725285D',
          vid: this.approvetable[0].hash.vid,
        };
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$parent.showdia(4, this.approvetable[0].hash.vid);
          this.innerVisible55 = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
};
</script>

<style scoped>
.el-form-item {
    width: 50%;
    margin-bottom: 22px;
    display: inline-block;
}
.tablediv{
  display: flex;
  justify-content: space-around;

}
.tablediv span{
  border:1px solid #333;
  display: inline-block;
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center
}
.span{
  line-height: 25px!important;
}
</style>
